<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 300px;
        height: 300px;
        background: aquamarine;
        position: absolute;
        cursor: pointer;
    }
</style>
<body>
<div></div>
<script>
    var div = document.querySelector('div');
    var startX = 0;     //获取手指初始坐标
    var startY = 0;
    var x = 0;          //获取盒子原来的坐标
    var y = 0;
    div.addEventListener('touchstart',function (e) {
        startX = e.targetTouches[0].pageX;      //手指按下，获取手指初始坐标
        startY = e.targetTouches[0].pageY;
        x = this.offsetLeft;        //手指按下获取盒子当前的位置
        y = this.offsetTop;
    });
    div.addEventListener('touchmove',function (e) {
        var moveX = e.targetTouches[0].pageX - startX;  //计算手指的移动距离 手指移动后的坐标减去手指初始坐标
        var moveY = e.targetTouches[0].pageY - startY;
        this.style.left = x + moveX + 'px';     //移动盒子 盒子原来的位置+手指移动的距离
        this.style.top = y + moveY + 'px';
        e.preventDefault();     //阻止屏幕滚动默认行为
    })
</script>
</body>
</html>